<!DOCTYPE html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Visualizations - Home</title>

<!--css-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/home.css">

<!--js-->
<script src="js/external/jquery-1.10.2.js"></script>
<script src="js/home.js"></script>
<script src="js/common.js"></script>

<!--fonts-->
<link href="fonts/silkscreen/stylesheet.css" rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

</head>

<body>

<!--facebook login stuff-->
<div id="fb-root"></div>
<script>
  // Load the SDK asynchronously
  (function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = "//connect.facebook.net/en_US/all.js";
   ref.parentNode.insertBefore(js, ref);
  }(document));
</script>
<!-- end facebook login stuff-->

<div id="top-bar">
	<a id="home" href="">we<span class="colour">need</span>a<span class="colour">name</span></a>
    <a id="fb-login" href="#" target="_blank">Facebook connect</a>
    <span id="trick">
		<fb:login-button show-faces="false" width="200" max-rows="1" style="float: right; margin-top: 9px;"></fb:login-button>
    </span>
</div>

<h1>we<span class="colour">need</span>a<span class="colour">name</span></h1>
<h2>visualising data structures and algorithms</h2>
<form id="searchbar">
	<input id="search" type="text" autocomplete="off" value="Search..."
    ><div id="show-filters" title="show/hide filters"><img src="img/arrow_white.png"/></div>
</form>
<div id="active-tags"></div>
<div id="emptySearchMsg">No results were found.</div>
<div id="filters-and-lines">
    <div class="line" style="margin-top: 20px;"></div>
    <div id="filters"></div>
    <div class="line"></div>
</div>

<div id="main">
<ul id="list">
	
	<li class="viz" id="sorting">
    	<div class="li-wrapper">
            <a class="thumbnail">
            	<img src="img/sorting.gif">
                <img class="static" src="img/sorting.jpg">
            </a>
            <div class="info">
                <h3><a href="">Sorting</a></h3>
                <div class="indv-viz-filters"></div>
            </div>
        </div>
    </li>
    
    <li class="viz" id="bst">
    	<div class="li-wrapper">
            <a class="thumbnail" href="bst.html">
            	<img src="img/bst.gif">
                <img class="static" src="img/bst.jpg">
            </a>
            <div class="info">
                <h3><a href="bst.html">Binary Search Tree, AVL Tree</a></h3>
                <div class="indv-viz-filters"></div>
            </div>
        </div>
    </li>
    <li class="viz" id="heap">
    	<div class="li-wrapper">
            <a class="thumbnail" href="heap.html">
            	<img src="img/heap.gif">
                <img class="static" src="img/heap.jpg">
            </a>
            <div class="info">
                <h3><a href="heap.html">Binary Heap</a></h3>
                <div class="indv-viz-filters"></div>
            </div>
        </div>
    </li>
    <li class="viz" id="union">
    	<div class="li-wrapper">
            <a class="thumbnail" href="ufds.html">
            	<img src="img/union.gif">
                <img class="static" src="img/union.jpg">
            </a>
            <div class="info">
                <h3><a href="ufds.html">Union Find</a></h3>
                <div class="indv-viz-filters"></div>
            </div>
        </div>
    </li>
    <li class="viz" id="linked">
		<div class="li-wrapper">
            <a class="thumbnail" >
            	<img src="img/list.gif">
                <img class="static" src="img/list.jpg">
            </a>
            <div class="info">
                <h3><a href="">Linked List, Stack, Queue</a></h3>
                <div class="indv-viz-filters"></div>
            </div>
        </div>
    </li>
    <li  class="viz" id="bitmask">
    	<div class="li-wrapper">
            <a class="thumbnail" href="bitmask.html">
                <img src="img/bitmask.gif">
                <img class="static" src="img/bitmask.jpg">
            </a>
            <div class="info">
                <h3><a href="bitmask.html">Bitmask</a></h3>
                <div class="indv-viz-filters"></div>
            </div>
        </div>
    </li>
    <li class="viz" id="graphs">
    	<div class="li-wrapper">
            <a class="thumbnail" >
            	<img src="img/graphs.gif">
                <img class="static" src="img/graphs.jpg">
            </a>
            <div class="info">
                <h3><a href="">Graphs</a></h3>
                <div class="indv-viz-filters"></div>
            </div>
        </div>
    </li>
    <li class="viz" id="mst">
    	<div class="li-wrapper">
            <a class="thumbnail" href="mst.html">
                <img src="img/mst.gif">
                <img class="static" src="img/mst.jpg">
            </a>
            <div class="info">
                <h3><a href="mst.html">Minimum Spanning Tree</a></h3>
                <div class="indv-viz-filters"></div>
            </div>
        </div>
    </li>
    
    <li class="viz" id="sssp">
    	<div class="li-wrapper">
            <a class="thumbnail" href="sssp.html">
                <img src="img/sssp.gif">
                <img class="static" src="img/sssp.jpg">
            </a>
            <div class="info">
                <h3><a href="sssp.html">Single-Source Shortest Paths</a></h3>
                <div class="indv-viz-filters"></div>
            </div>
        </div>
    </li>
    <li class="viz" id="suffixtree">
    	<div class="li-wrapper">
            <a class="thumbnail" href="suffixtree.html">
                <img src="img/suffixtree.gif">
                <img class="static" src="img/suffixtree.jpg">
            </a>
            <div class="info">
                <h3><a href="suffixtree.html">Suffix Tree</a></h3>
                <div class="indv-viz-filters"></div>
            </div>
        </div>
    </li>
    
</ul>
</div>

<div id="temp">
    <p>We are migrating!</p>
    <a href="http://www.comp.nus.edu.sg/~stevenha/visualization/index.html">Access the old site here!</a>
</div>

<div id="bottom-bar">
	<a id="trigger-about">About</a>
    <a id="trigger-team">Team</a>
    <a id="trigger-terms">Terms of use</a>
</div>

<!-- Bottom bar and overlay popups -->
<div id="dark-overlay"></div>
<div id="about" class="overlays"></div>
<div id="team" class="overlays"></div>
<div id="termsofuse" class="overlays"></div>

</body>
</html>